<template>
  <div class="app-container">
    <div v-if="authorityHandle(258)" class="filter-container">
      <span class="filter-title filter-item">雷区排序</span>
      <k-select
        v-model="userType"
        class="filter-item right-item"
        style="width: 120px"
        :select-params="[
          { label: '1', value: 1 },
          { label: '2', value: 2 },
          { label: '3', value: 3 },
          { label: '4', value: 4 },
          { label: '5', value: 5 },
          { label: '6', value: 6 },
        ]"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">雷区开关</span>
      <k-select
        v-model="roomType"
        class="filter-item right-item"
        style="width: 120px"
        :select-params="[
          { label: '开', value: 1 },
          { label: '关', value: 2 },
        ]"
        @handleSelectEvent="handleFilterOpen"
      />
    </div>
    <!-- openAssignAccountDialog -->
    <k-button v-if="authorityHandle(258)" class="top-btn" value="添加雷区" @click.native="addBoxDialog" />
    <k-button v-if="authorityHandle(258)" class="top-btn" value="删除雷区" @click.native="deleteBox" />
    <k-button v-if="authorityHandle(258)" class="top-btn" value="雷区鼓励饰品" @click.native="welfareSettingDialog" />
    <!--表格相关 -->
    <el-table
      :data="boxList"
      fit
      border
      highlight-current-row
      style="width: 100%; border-radius: 8px"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
      @selection-change="handleSelectionChange"
      @sort-change="sortChange"
    >
      <el-table-column min-width="60px" type="selection" align="center" />
      <el-table-column prop="detailsName" min-width="120px" label="雷区名称" show-overflow-tooltip align="center" />
      <el-table-column prop="sort" width="80px" label="雷区序号" align="center" />
      <el-table-column min-width="120px" label="饰品图片" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 80px"
            :src="scope.row.iconUrl"
            fit="contain"
            :preview-src-list="[scope.row.iconUrl]"
          />
        </template>
      </el-table-column>
      <el-table-column prop="goodsName" min-width="100px" label="饰品名称" show-overflow-tooltip align="center" />
      <el-table-column min-width="100px" label="饰品品质" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <el-tag style="border:none" :color="backClac(scope.row.rarityId).color" effect="dark">
            {{ backClac(scope.row.rarityId).name }}
          </el-tag>
        </template>
      </el-table-column> <el-table-column prop="goodsPrice" min-width="90px" label="饰品价格" align="center" />
      <el-table-column prop="goodsNum" min-width="90px" label="饰品数量" align="center" />
      <el-table-column prop="bombNum" min-width="90px" label="炸弹数量" align="center" />
      <el-table-column min-width="90px" label="饰品概率" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.probability }}</span>
          <span>%</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" min-width="150px" label="添加时间" align="center" />
      <el-table-column min-width="80px" label="开关" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#3b425d"
            inactive-color="#E9EBF2"
            :active-value="1"
            :inactive-value="2"
            :disabled="!authorityHandle(258)"
            @change="updateActStatus($event, scope)"
          />
        </template>
      </el-table-column>
      <el-table-column min-width="100px" label="操作" align="center">
        <template slot-scope="scope">
          <div class="op-div">
            <k-button
              v-if="authorityHandle(258)"
              class="table-btn"
              value="查看/修改"
              @click.native="addBoxUpdateDialog(scope.row)"
            />
            <!-- :disabled="scope.row.boxStatus === 1 ? true : false" -->
            <!-- <k-button
              v-if="authorityHandle(258)"
              class="table-btn"
              value="雷区鼓励饰品"
              style="width: 100px;"
              @click.native="welfareSettingDialog(scope.row)"
            /> -->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="loadData"
    />
    <!-- 添加and修改箱子 addBox 弹窗 -->
    <k-dialog
      :show-hide.sync="addBox.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      class="addBox-dialog"
      title="添加/修改雷区"
      :show-foot="false"
      :two-btn="true"
      :close-fun="handleCloseDialog"
      @click="saveBoxData"
    >
      <el-form :model="addBoxInfo" label-width="auto" class="form-modify">
        <el-form-item label="雷区名称：" prop="name">
          <el-input v-model="addBoxInfo.detailsName" show-word-limit placeholder="请输入雷区名称" />
        </el-form-item>
        <el-form-item label="雷区序号：" prop="index">
          <k-select
            v-model="addBoxInfo.sort"
            class="filter-item right-item"
            style="width: 120px"
            :disabled="triggBool"
            :select-params="[
              { label: '1', value: 1 },
              { label: '2', value: 2 },
              { label: '3', value: 3 },
              { label: '4', value: 4 },
              { label: '5', value: 5 },
              { label: '6', value: 6 },
            ]"
          />
        </el-form-item>
        <el-form-item label="饰品名称：" prop="goodsName">
          <el-popover v-model="isShow" placement="bottom" min-width="500" trigger="manual">
            <ul>
              <li v-for="item in goodsList" :key="item.lineId">
                <el-radio v-model="item.lineCheck" :label="item.lineName" @change="checkOne(item)">
                  {{ item.lineName }}
                </el-radio>
              </li>
            </ul>
            <li v-show="hasNoData" class="search-item border-bottom">
              无匹配数据1
            </li>
            <div slot="reference" class="trigger-area">
              <el-input
                v-model="addBoxInfo.goodsName"
                clearable
                class="input-search"
                placeholder="请输入内容"
                @keyup.enter.native="searchName"
                @input="searchName"
                @clear="inputClear"
              />
            </div>
          </el-popover>
          <!-- <el-input v-model="addBoxInfo.goodsName" clearable class="input-search" placeholder="请输入内容" @keyup.enter.native="searchName" @clear="inputClear" /> -->
        </el-form-item>
        <el-form-item label="饰品价格：" prop="name">
          <el-input v-model="addBoxInfo.goodsPrice" disabled show-word-limit placeholder="请输入饰品价值" />
        </el-form-item>
        <el-form-item label="饰品数量：" prop="goods">
          <el-input v-model="addBoxInfo.goodsNum" type="number" show-word-limit placeholder="请输入饰品数量" />
        </el-form-item>
        <el-form-item label="炸弹数量：" prop="bom">
          <el-input v-model="addBoxInfo.bombNum" type="number" show-word-limit placeholder="请输入炸弹数量" />
        </el-form-item>
      </el-form>
    </k-dialog>
    <!-- 添加and修改箱子 addBox 弹窗 -->
    <!-- 雷区鼓励饰品 弹窗 -->
    <!-- 关卡鼓励饰品 -->
    <k-dialog
      :show-hide.sync="welfareSetting"
      :modal-append-to-body="false"
      :append-to-body="true"
      :show-foot="false"
      title=""
      class="give-dialog"
      :two-btn="authorityHandle(43)"
      @click="saveWelfareData"
    >
      <el-form label-width="100px" class="give_div">
        <el-form-item label="饰品名称：" prop="goodsName" style="display: block; margin: 0 auto">
          <el-select
            v-model="goodsListBool"
            multiple
            style="width: 100%;"
            filterable
            placeholder="请选择"
            :disabled="!authorityHandle(43)"
            @keyup.enter.native="searchNames"
          >
            <el-option
              v-for="item in giveGoodsResultList"
              :key="item.lineName"
              :label="item.lineName"
              :value="item.lineId"
            />
          </el-select>
        </el-form-item></el-form>
    </k-dialog>
  </div>
</template>

<script>
import {
  getOpenBoxWarningSetting,
  setOpenBoxWarningSetting,
  getBoxStageList
} from '@/api/rules/listdata'
import {
  delMinefieldDetails,
  getEncourage,
  addEncourage,
  updateMinefieldDetailsStatus,
  addMinefieldDetails,
  listMinefieldDetailsData,
  updateMinefieldDetails
} from '@/api/minefield/index'
import { setAmmoBoxList } from '@/api/bullet/index'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { getGoodsPlatformList } from '@/api/rules/listdata'
export default {
  components: { Pagination },
  data() {
    return {
      giveGoodsResultList: [], // 所以鼓励视频
      roomType: '',
      userType: '',
      triggBool: false,
      isShow: false,
      isShows: false,
      hasNoData: false,
      goodsList: [],
      goodsListBool: [],
      goodsListBools: [],
      goodsListBoolId: 0,
      addEncourageList: {
        ids: [],
        id: 105
      },
      ids: [],
      smartWarningModel: {
        percentTime: undefined,
        percentValue: undefined,
        numTime: undefined,
        numValue: undefined
      },
      currentBoxId: undefined,
      bulletSettingItemList: [
        {
          id: undefined,
          boxId: undefined,
          minAmmo: undefined,
          maxAmmo: undefined,
          probability: undefined
        }
      ],
      divideZone: {
        divideZoneArray: [
          {
            id: undefined,
            boxId: -1,
            minPercent: '',
            maxPercent: '',
            openSort: 0
          }
        ]
      },
      multipleSelection: [],
      addBoxInfo: {
        // 添加修改雷场信息
        goodsId: '',
        minefieldId: '',
        detailsName: '',
        sort: '',
        goodsNum: '',
        bombNum: '',
        goodsName: '',
        goodsPrice: ''
        // minefieldRouteId: undefined
      },
      boxList: [],
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        status: undefined,
        sortNew: undefined,
        sort: '', // 排序字段 为对应列名,
        direction: '', // 排序 正向(asc)逆向(desc),
        startTime: '', // 饰品外观',
        endTime: '', // 饰品类别',
        key: '', // 箱子名称或关键词 箱子配置界面所用'
        minefieldId: ''

      },
      timeValue: '',
      conditions: {
        keyword: null
      },
      addBox: {
        showHide: false
      },
      addBoxUpdate: {
        showHide: false
      },
      quickDiscountShow: false,
      discountTime: '',
      bulletSetting: false,
      smartDivideZoneDialog: false,
      smartWarningDialog: false,
      dialogStatus: 'create',
      textMap: {
        update: '添加/修改雷区',
        create: '添加/修改雷区'
      },

      /* 活动福利配置*/
      welfareSetting: false, // 弹框
      resultList: [], // 全部饰品

      boxsResultList: [],
      welfareProbability: undefined,
      welfareData: {
        boxCardSettings: [],
        boxId: undefined,
        activityId: ''
      },
      boxCardSettings: [
        {
          probability: undefined,
          goodsId: undefined,
          customPrice: undefined
        }
      ],
      expected_value: 0
    }
  },
  watch: {
    // 时间赋值
    timeValue(val) {
      this.listQuery.startTime = this.timeValue ? this.timeValue[0] : null
      this.listQuery.endTime = this.timeValue ? this.timeValue[1] : null
    }
  },
  created() {
    this.addBoxInfo.minefieldId = this.$route.query.id
    this.listQuery.minefieldId = this.$route.query.id
    this.loadData()
    this.getSmartDivideZone()
  },
  mounted: function() {
    this.keyword = ''
    var _this = this
    // 点击页面空白处隐藏下拉列表
    document.addEventListener('click', function() {
      _this.isShow = false
      _this.isShows = false

      _this.$emit('clearReslutList', '')
    })
  },
  methods: {
    onInputChange() {
      console.log('dasda')
      this.searchNames(this.addBoxInfo.goodsName)
    },
    // table表格数据
    loadData() {
      listMinefieldDetailsData(this.listQuery).then((res) => {
        const data = res.data
        this.boxList = data.rows
        this.totalRows = data.totalRows
      })
    },
    inputClear() {
      this.addBoxInfo.goodsName = ''
      this.addBoxInfo.goodsPrice = ''
    },
    handleClose(tagItem) {
      this.checkedList.splice(this.checkedList.indexOf(tagItem), 1)
      this.resultList.map(function(item) {
        if (item === tagItem) {
          item.lineCheck = false
        }
      })
    },
    // 选择单个
    checkOne(v) {
      this.isShow = false
      // this.goodsList.map((item) => {
      //   if (item.lineId == v.lineId) this.goodsListBool = item
      // })
      this.goodsListBools = v
      this.addBoxInfo.goodsName = this.goodsListBools.lineName
      this.addBoxInfo.goodsPrice = this.goodsListBools.price
      console.log(this.goodsListBools.lineName, v, 'v')
    },
    // 选择单个
    checkTWO(v) {
      // this.goodsList.map((item) => {
      //   if (item.lineId == v.lineId) this.goodsListBool = item
      // })
      // this.addBoxInfo.goodsName = this.goodsListBool.lineName
      // this.addBoxInfo.goodsPrice = this.goodsListBool.price
      console.log(this.goodsListBool, v, 'v')
      const data = {
        id: v.lineId,
        name: v.lineName
      }
      let ii = 0
      if (this.goodsListBool == null) this.goodsListBool = []
      this.goodsListBool.map((item) => {
        if (item.id == data.id) ii += 1
      })
      if (ii == 0) {
        this.goodsListBool.push(data)
        this.goodsListBool = [...new Set(this.goodsListBool)]
      }
    },
    closable(index) {
      // this.welfareData.activityId = this.welfareData.activityId.splice(index - 1, 1)
      console.log(this.goodsListBool.splice(index - 1, 1), index)
    },
    /* 活动福利配置*/
    welfareSettingDialog() {
      this.goodsListBool = []
      this.addBoxInfo.goodsName = ''

      getEncourage({ id: this.$route.query.id }).then((res) => {
        this.goodsListBool = []
        if (res.data.data) {
          this.goodsListBool = res.data.data.map(item => item.id)
        }
      })
      getGoodsPlatformList({
        alreadyIds: [],
        key: ' '
      }).then((res) => {
        this.giveGoodsResultList = res.data
        this.welfareSetting = true
      })
    },
    // 添加箱子
    saveBoxData() {
      if (this.goodsListBoolId) {
        this.saveBoxDatas()
        return
      }
      this.dialogStatus = 1
      const data = {
        minefieldId: this.listQuery.minefieldId,
        detailsName: this.addBoxInfo.detailsName,
        sort: this.addBoxInfo.sort,
        goodsId: this.goodsListBools.lineId,
        goodsNum: this.addBoxInfo.goodsNum,
        bombNum: this.addBoxInfo.bombNum
      }
      if (data.minefieldId && data.detailsName && data.sort && data.goodsId && data.goodsNum && data.bombNum && this.addBoxInfo.goodsName) {
        if (Number(data.bombNum) + Number(data.goodsNum) > 7) return this.$message.error('饰品加炸弹数量最高为7')
        addMinefieldDetails(data).then((res) => {
          if (res.data.success) {
            this.addBox.showHide = false
            this.addBoxUpdate.showHide = false
            this.$message.success('保存成功')
            this.handleFilter()
            this.$resetForm(this.addBoxInfo)
          } else {
            if (res.data.msg == 'Error') this.$message.error('有空值')
            else this.$message.error(res.data.msg)
          }
        })
      } else {
        this.$message.error('输入框不可为空')
      }
    },
    // 未开启的关卡颜色
    backClac(level) {
      if ([3].includes(level)) {
        return {
          name: '工业级',
          color: '#5e98d9'
        }
      }
      if ([2, 8, 13].includes(level)) {
        return {
          name: '军规级',
          color: '#4b69ff'
        }
      }
      if ([4, 11, 14].includes(level)) {
        return {
          name: '受限级',
          color: '#8847ff'
        }
      }
      if ([5, 10, 15].includes(level)) {
        return {
          name: '保密级',
          color: '#d32ce6'
        }
      }
      if ([6, 9, 16].includes(level)) {
        return {
          name: '隐秘级',
          color: '#eb4b4b'
        }
      }
      if ([12].includes(level)) {
        return {
          name: '违禁级',
          color: '#e4ae39'
        }
      }
      if ([1, 7].includes(level)) {
        return {
          name: '消费级',
          color: '#b0c3d9'
        }
      }
      return {
        name: '出错了',
        color: '#ff0000'
      }
    },
    // 修改箱子
    saveBoxDatas() {
      this.dialogStatus = 0
      const data = {
        id: this.goodsListBoolId,
        detailsName: this.addBoxInfo.detailsName,
        sort: this.addBoxInfo.sort,
        goodsId: this.goodsListBools.lineId,
        goodsNum: this.addBoxInfo.goodsNum,
        bombNum: this.addBoxInfo.bombNum
      }
      if (data.id && data.detailsName && data.sort && data.goodsId && data.goodsNum && data.bombNum && this.addBoxInfo.goodsName) {
        if (Number(data.bombNum) + Number(data.goodsNum) > 7) return this.$message.error('饰品加炸弹数量最高为7')
        updateMinefieldDetails(data).then((res) => {
          if (res.data.success) {
            this.addBox.showHide = false
            this.$message.success('保存成功')
            this.handleFilter()
            this.$resetForm(this.addBoxInfo)
          } else {
            if (res.data.msg == 'Error') this.$message.error('有空值')
            else this.$message.error(res.data.msg)
          }
        })
      } else {
        this.$message.error('输入框不可为空')
      }
    },
    // 活动开关
    updateActStatus(event, scope) {
      updateMinefieldDetailsStatus({
        id: scope.row.id,
        status: scope.row.status
      }).then((res) => {
        this.$message[res.data.success ? 'success' : 'error'](res.data.msg)
        this.loadData()
      })
    },

    change(e, item) {
      const data = this.resultList.find((value) => value.lineId == e)
      item.customPrice = data.price
    },

    // 单个删除
    curItem(index) {
      this.boxCardSettings.splice(index, 1)
    },

    addItem() {
      this.boxCardSettings.push({
        probability: undefined,
        goodsId: undefined,
        customPrice: undefined
      })
    },

    // 删除箱子
    deleteBox() {
      const _vue = this
      if (_vue.multipleSelection.length < 1) {
        this.$message.error('请至少选择一条数据进行删除！')
        return
      }

      for (var i = 0; i < _vue.multipleSelection.length; i++) {
        if (_vue.multipleSelection[0].status == 1) {
          return this.$message.error('当前雷区已开启，无法删除！')
        }
      }
      const selections = _vue.multipleSelection
      this.$confirm('确定删除选中的雷区么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          var ids = []
          for (var i = 0; i < selections.length; i++) {
            ids.push(selections[i].id)
          }
          console.log(ids)
          delMinefieldDetails({ id: this.$route.query.id, ids: ids.toString() }).then((res) => {
            if (res.data.success) {
              this.$message.success('删除成功')
              this.loadData()
            } else {
              this.$message.error(res.data.msg)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 保存活动
    saveWelfareData() {
      this.ids = []
      if (!this.goodsListBool) {
        return this.$message.error('饰品名称必须填')
      }
      this.addEncourageList.id = this.$route.query.id
      this.addEncourageList.ids = this.goodsListBool
      addEncourage(this.addEncourageList).then((res) => {
        if (res.data.success) {
          this.$message.success(res.data.msg)
          this.welfareSetting = false
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },

    /**/

    quickDiscount() {
      this.quickDiscountShow = true
    },
    // 设置新增
    newlyAdded() {
      this.bulletSettingItemList.push({
        id: undefined,
        boxId: undefined,
        minAmmo: undefined,
        maxAmmo: undefined,
        probability: undefined
      })
    },
    // 设置删除
    deleteItem(value, indexItem) {
      if (!value) {
        this.bulletSettingItemList.splice(indexItem, 1)
        return
      }
      var index = this.bulletSettingItemList.findIndex(function(item) {
        return item.id === value
      })
      if (index !== -1) {
        this.bulletSettingItemList.splice(index, 1)
      }
    },
    getSmartDivideZone() {
      getBoxStageList({ id: -1 }).then((res) => {
        this.divideZone.divideZoneArray = res.data
      })
    },
    // 智能分区
    smartDivideZone() {
      this.smartDivideZoneDialog = true
    },
    // 智能预警
    smartWarning() {
      getOpenBoxWarningSetting().then((res) => {
        this.smartWarningModel = res.data
        this.smartWarningDialog = true
      })
    },
    saveSmartWarning() {
      setOpenBoxWarningSetting(this.smartWarningModel).then((res) => {
        this.$message.success('保存成功')
        this.smartWarningDialog = false
      })
    },
    // 选择项发生变化时会触发该事件
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 表格的排序条件发生变化的时候会触发该事件
    sortChange(column, prop, order) {
      this.listQuery.sort = column.prop
      if (column.order === 'ascending') {
        this.listQuery.direction = 'asc'
      } else if (column.order === 'descending') {
        this.listQuery.direction = 'desc'
      }
      this.loadData()
    },
    // 雷区排序
    handleFilter() {
      this.listQuery['sortNew'] = this.userType
      this.loadData()
    },
    // 雷场开关
    handleFilterOpen() {
      console.log(this.roomType)
      this.listQuery['status'] = this.roomType
      this.loadData()
    },
    searchName(v) {
      console.log(this.addBoxInfo, v)
      this.isShow = true
      getGoodsPlatformList({
        alreadyIds: [],
        key: this.addBoxInfo.goodsName
      }).then((res) => {
        if (res.data.length == 0) this.hasNoData = true
        this.goodsList = res.data
        if (res.data == []) this.hasNoData = true
      })
    },
    searchNames(v) {
      console.log(this.addBoxInfo, v)
      getGoodsPlatformList({
        alreadyIds: [],
        key: this.addBoxInfo.goodsName
      }).then((res) => {
        if (res.data.length == 0) this.hasNoData = true
        this.goodsList = res.data
        this.goodsList.map((item) => {
          for (let i = 0; i < this.goodsListBool.length; i++) {
            if (item.lineId == this.goodsListBool[i].id) {
              item.lineCheck = true
            }
          }
        })
        if (res.data == []) this.hasNoData = true
      })
    },
    addBoxDialog() {
      this.$resetForm(this.addBoxInfo)
      this.isShows = true
      this.addBox.showHide = true
      this.goodsListBoolId = 0
    },
    getExpectedBulletNums() {
      const expectBulletNums = this.bulletSettingItemList
        .map((item) => {
          return (
            ((Number(item.minAmmo) + Number(item.maxAmmo)) / 2) *
            item.probability
          )
        })
        .reduce(function(a, b) {
          return Number(a) + Number(b)
        })
      this.$log(expectBulletNums)
      return expectBulletNums / 100
    },
    saveBulletSetting() {
      const probSum = this.bulletSettingItemList
        .map((item) => {
          return item.probability
        })
        .reduce(function(a, b) {
          return Number(a) + Number(b)
        })
      this.$log(probSum)
      if (100 - Number(probSum).toFixed(2) !== 0) {
        this.$message.error(
          '掉落概率和要等于100,还需要 ' + (100 - probSum).toFixed(2)
        )
        return
      }
      this.bulletSettingItemList.map((item) => {
        item.boxId = this.currentBoxId
      })
      setAmmoBoxList(this.bulletSettingItemList).then((res) => {
        this.$message.success('保存成功')
        this.bulletSetting = false
      })
    },
    // 修改雷场信息
    addBoxUpdateDialog(row) {
      if (row.status == 0) this.triggBool = true
      else this.triggBool = false
      this.goodsListBools.lineId = row.goodsId
      this.goodsListBoolId = row.id
      this.addBox.showHide = true
      this.addBoxInfo.sort = row.sort
      this.addBoxInfo.detailsName = row.detailsName
      this.addBoxInfo.goodsName = row.goodsName
      this.addBoxInfo.goodsPrice = row.goodsPrice
      this.addBoxInfo.goodsNum = row.goodsNum
      this.addBoxInfo.bombNum = row.bombNum
      this.addBoxInfo.minefieldId = row.minefieldId
      this.addBoxInfo.goodsId = row.goodsId
      // this.$log(this.addBoxInfo)
    },
    handleCloseDialog() {
      this.$resetForm(this.addBoxInfo)
      this.addBox.showHide = false
    }
  }
}
</script>
<style lang="scss" scoped>
$menuText: #14162e; // 侧边栏字体颜色
$hoverColor: #1D143C; // 鼠标停留主色调浅色
$mainColor: #3b425d; // 主色调

.warning_div {
  .second {
    line-height: 40px;
    margin-left: 10px;
  }
}

.dialog-warningSetting {
  ::v-deep.el-input {
    width: 110px;
  }

  .price-input {
    width: 150px;
  }

  .el-icon {

    &-circle-plus,
    &-remove {
      font-size: 22px;
      color: #3b425d;
      margin-left: 10px;
    }
  }
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;

  li {
    margin: 0 0 30px 0px;
    display: flex;
    flex-direction: row;
    align-items: center;

    .warning-title {
      font-size: 16px;
      color: #14162e;
      margin-right: 30px;
    }

    i {
      color: #d1d5dd;
    }
  }
}

.filter-container {
  width: 100%;
  height: 48px;
  line-height: 48px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }

  .kInput {
    position: absolute;
    right: 20px;
  }

  .filter-title {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-right: 22px;
    color: #14162e;
  }

  .user-item {
    margin-left: 10px;
    margin-right: 20px;
  }

  .user-status,
  .account-status {
    margin-right: 20px;
  }
}

.top-btn {
  margin: 30px 0px 30px 0px;
  font-size: 14px;
  color: #ffffff;

  &:nth-of-type(2) {
    margin-left: 20px;
  }

  &:nth-of-type(3) {
    margin-left: 20px;
  }

  &:nth-of-type(4) {
    margin-left: 20px;
  }
}

::v-deep .el-input__inner:focus {
  border-color: $mainColor;
}

.el-form-item__label-wrap .el-form-item__label {
  float: none;
}

.dialog-openboxsetting {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 80px 80px;
}

.form-modify {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 10px 80px;

  .modify-right {
    margin-left: 80px;
  }

  ::v-deep .el-input__inner {
    // border-color: $mainColor;
    width: 200px;
  }
}

.addBox-dialog {
  ::v-deep .el-dialog__body {
    padding: 10px 80px;
  }

  ::v-deep .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
    font-size: 40px;
  }
}

.upload-btn {
  font-size: 14px;
  color: #ffffff;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.table-btn {
  width: 90px;
  height: 35px;
  line-height: 35px;
  padding: 0;
  background: #e7ecf8;
  border: 1px solid $mainColor;
  border-radius: 8px;
  font-size: 14px;
  color: $mainColor;

  &:hover {
    background: $mainColor;
    color: #fff;
  }
}

.welfare_box {
  width: 540px;
  display: flex;
  justify-content: center;
  margin-right: 80px;
  box-sizing: border-box;

  .el-input {
    width: 300px;
    margin-right: 10px;
  }

  .el-select {
    width: 300px !important;
  }

  .welfare_list {
    width: 460px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    // border: 1px solid red;
    transform: translateX(30px);
    flex-wrap: wrap;

    .welfare_item {
      position: relative;
      width: 60%;

      // margin-bottom: 20px;
      // padding: 3px 27px 3px 7px;
      span {
        font-size: 14px;
        font-weight: bold;
      }

      .closeLineName {
        font-size: 40px;
        position: absolute;
        right: 6px;
        top: -2px;
      }

      .el-input {
        width: 120px;
        margin: 0;
      }

      .el-select {
        width: 120px !important;
      }

      p {
        font-size: 14px;
        transform: translateX(-10px);
      }
    }
  }
}

.set_box {
  width: 700px;
  margin: 0 80px;
  box-sizing: border-box;

  .Recharge_Data {
    width: 100%;
    height: 40px;
    margin-top: 10px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;

    .Recharge_Data_box {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .el-input {
        width: 150px;
        height: 35px;

        input {
          width: 150px;
          height: 35px;
        }
      }

      span {
        font-size: 14px;
        width: 100px;
      }
    }

    .operation {
      width: 12%;
      display: flex;
      justify-content: space-between;

      .el-icon {

        &-circle-plus,
        &-remove {
          font-size: 22px;
          color: #3b425d;
          margin-left: 10px;
        }
      }
    }
  }
}

.give-dialog {
  ::v-deep .el-dialog__body {
    width: 678px;
    text-align: center;
  }

  .give_div {
    margin: 0 auto;
    padding: 50px 0px;
    height: 400px;
  }
}
</style>
